// script.js
let todos = [];

function addTodo() {
    const input = document.getElementById('todoInput');
    const text = input.value.trim();
    if (text) {
        todos.push({ text, completed: false });
        input.value = '';
        renderTodos();
    }
}

function renderTodos() {
    const list = document.getElementById('todoList');
    list.innerHTML = todos.map((todo, index) => `
        <li class="${todo.completed ? 'completed' : ''}">
            <span onclick="toggleTodo(${index})">${todo.text}</span>
            <span class="delete" onclick="deleteTodo(${index})">×</span>
        </li>
    `).join('');
}

function toggleTodo(index) {
    todos[index].completed = !todos[index].completed;
    renderTodos();
}

function deleteTodo(index) {
    todos.splice(index, 1);
    renderTodos();
}